<template>
  <main>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <div class="">
            <el-menu default-active="0" class="el-menu-vertical-demo">
              <el-menu-item v-for="(item, idx) in menu.arr" :index="idx.toString()" :key="idx" @click="select(item)">
                <span>{{ item.menu }}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <div class="article-title" v-for="(item, idx) in articl.arr" :key="idx" @click="pushDetail(item.id)">
              <h1>{{ item.title }}</h1>
              <el-divider />
            </div>
          </el-main>
        </el-container>
        <el-aside width="200px">Aside</el-aside>
      </el-container>
    </div>

    <el-dialog v-model="dialogFormVisible" title="登录" width="40%">
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="logIn">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

  </main>
</template>


<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
import { useStore } from '@/stores/user'
import { storeToRefs } from 'pinia';
import { getArticle, getMenu, login } from '@/api/index';
import { ElMessage } from 'element-plus';
const { ctx, proxy } = getCurrentInstance()
const router = useRouter();
const store = useCounterStore()
const useInfoStore = useStore()

const select = (val: Object) => {
  getArticleList(val.id)
}

const menu = reactive({ arr: [] })

const articl = reactive({ arr: [] })

const pushDetail = (id: Number) => {
  router.push({ path: '/detail', query: { id } })
}

const { dialogFormVisible } = storeToRefs(store)
const formLabelWidth = '100px'

const form = reactive({
  name: '小王',
  password: 123456,
})

onMounted(() => {
  // console.log('proxy',ctx)
  getMenu().then((res: Object) => {
    const { code, msg, data, } = res
    if (code == 200) {
      menu.arr = data
      getArticleList(data[0].id)
    } else {
      ElMessage.error(msg)
    }
  })
})

const getArticleList = (id: Number) => {
  getArticle({ menuId: id }).then((res: Object) => {
    const { code, msg, data } = res
    if (code == 200) {
      articl.arr = data
    } else {
      ElMessage.error(msg)
    }
  })
}

const logIn = () => {
  const { name, password } = form
  login({ name, password }).then((res: Object) => {
    const { code, msg, data } = res
    if (code == 200) {
      useInfoStore.setToken(data.token)
      store.setDialogState(false)
      ElMessage.success(msg)
    } else {
      ElMessage.error(msg)
    }
  })
}

</script>

<style lang="less" scoped>
.article-title {
  cursor: pointer;
  height: 50px;
  line-height: 50px;

  h1 {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;

  }

  &:hover {
    color: #409EFF;
    background-color: #EBEEF5;
  }

  .el-divider {
    margin: 0px;
  }
}
</style>